//该文件主要用于：①创建路由器。②制订路由规则
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//使用插件
Vue.use(VueRouter)

//创建路由器，并制订路由规则
const router = new VueRouter({
	mode:'history',
	routes:[ //该数组用于存放一组一组的路由规则
		{
			name:'guanyu',
			path:'/about', //路径
			component:About //组件
		},
		{
			name:'zhuye',
			path:'/home', //路径
			component:Home, //组件
			children:[
				{
					name:'xinwen',
					path:'news', //注意，此处要写news，不是/news
					component:News
				},
				{
					name:'xiaoxi',
					path:'message', //注意，此处要写message，不是/message
					component:Message,
					children:[
						{
							name:'xiangqing',
							path:'detail',
							component:Detail,
							// 第一种写法：props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件
							// props:{a:'哈哈',b:'嘻嘻',c:'拉拉'}, 

							// 第二种写法：props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件
							// props:true

							// 第三种写法：props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件
							props: route => {
								return {...route.query,a:'哈哈',b:'嘻嘻',c:'拉拉'}
							}
						}
					]
				}
			]
		},
		{
			path:'/',
			redirect:'/about'
		}
	] 
})

//暴露路由器
export default router